﻿@page "/features/colors"
@using System.Reflection
@using System.Text.RegularExpressions

<DocsPage>
    <DocsPageHeader Title="Colors">
        <Description>
            Out of the box, you get access to all colors in the <MudLink Href="https://material.io/guidelines/style/color.html">Material Design spec</MudLink> through css classes and Blazor.<br />
            You can also use the palette colors from either the default theme or your own.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Theme Palette Colors">
                <Description>
                    Each palette color gets converted to a class with the color as background and its contrast, but also separate classes for only background or text color. The CSS class is bound to the MudBlazor theme and updated if you change the theme dynamicly. <br /><br />
                    You can read more about theming <MudLink Href="/customization/theming/overview">MudBlazor here.</MudLink>
                </Description>
            </SectionHeader>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="CSS and Theme colors">
                        <Description>Here we add each class to the divs to change the background color, text color and both background and text color with one class only one class.</Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" ShowCode="true" Code="ColorsMudBlazorExample">
                        <ColorsMudBlazorExample />
                    </SectionContent>
                </DocsPageSection>
                <DocsPageSection>
                    <SectionHeader Title="CSharp and Theme colors">
                        <Description>You can also access the colors with blazor directly like we do in this example.</Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" ShowCode="true" Code="ColorsMudBlazorCodeExample">
                        <ColorsMudBlazorCodeExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Material Colors">
                <Description>
                   All Material colors, as well as background and text variants, are available for use in your application.
                </Description>
            </SectionHeader>
            <SectionSubGroups>
                
                <DocsPageSection>
                    <SectionHeader Title="CSS and Material colors">
                        <Description>Here we add each class to the divs to change the background color, text color and both background and text color with one class only one class.</Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" ShowCode="false" Code="ColorsMaterialExample">
                        <ColorsMaterialExample/>
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="CSharp and Material colors">
                        <Description>You can also access the material colors with blazor directly like we did above with the MudBlazor palette colors.</Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" ShowCode="true" Code="ColorsMaterialCodeExample">
                        <ColorsMaterialCodeExample/>
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="List of Material Colors">
                        <Description>Below is a list of the Material design color palette grouped by primary color</Description>
                    </SectionHeader>
                    <MudGrid Spacing="4">
                        @foreach (var color in MaterialColors)
                        {
                            <MudItem md="6" lg="4" xs="12">
                                <MudPaper Square="true" Elevation="0" Class="@($"pa-4 rounded-t d-flex shades-text text-white {GetColorClass(color.Color.ToLower())}")">
                                    <MudText Typo="Typo.h6">@color.Color</MudText>
                                </MudPaper>
                                @foreach (var shade in MaterialColorShades.Where(i => i.Color == color.Color))
                                {
                                    IsLightColor = false;
                                    if (shade.Name.Contains("Lighten5") || shade.Name.Contains("Lighten4") || shade.Name.Contains("Lighten3") || shade.Name.Contains("White") || shade.Name.Contains("Transparent"))
                                    {
                                        IsLightColor = true;
                                    }
                                    <MudPaper Square="true" Elevation="0" Class="@($"pa-4 d-flex align-center justify-space-between {GetColorClass(color.Color.ToLower())} {GetShadeClass(shade.Name.ToLower())} {(IsLightColor ? "grey-text text-darken-3" : "shades-text text-white")}")">
                                        <MudText>@shade.Name</MudText>
                                        <MudText>@shade.Value</MudText>
                                    </MudPaper>
                                }
                            </MudItem>
                        }
                    </MudGrid>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>

@code {

    List<MaterialColor> MaterialColors = new List<MaterialColor>();
    List<MaterialColor> MaterialColorShades = new List<MaterialColor>();

    public bool IsLightColor { get; set; }

    protected override void OnInitialized()
    {
        LoadColors();
    }
    
    private string GetColorClass(string value)
    {
        if (value.StartsWith("deep"))
        {
            return value.Replace("deep", "deep-");
        }
        else if(value.StartsWith("light"))
        {
            return value.Replace("light", "light-");
        }
        else if(value.StartsWith("bluegrey"))
        {
            return value.Replace("bluegrey", "blue-grey");
        }
        else if(value.StartsWith("shades"))
        {
            return value.Replace("shades", "black shades-text text-white");
        }
        else
        {
            return value;
        }
    }

    private string GetShadeClass(string value)
    {
        return Regex.Replace(value, "[0-9]", "-$&");
    }

    public void LoadColors()
    {
        var shades = new List<MaterialColor>();
        var colors = new List<MaterialColor>();

        foreach (var prop in typeof(Colors).GetMembers(BindingFlags.Public | BindingFlags.Static | BindingFlags.FlattenHierarchy))
        {
            if (prop.MemberType == MemberTypes.NestedType)
            {
                var Assembly = typeof(Colors).Assembly;
                Type SubColorType = Assembly.GetType(prop.ToString());
                string tempHex = "";
                foreach (var color in SubColorType.GetProperties())
                {
                    var shadeColor = new MaterialColor
                    {
                        Color = prop.Name,
                        Name = color.Name,
                        Value = color.GetValue(SubColorType).ToString()
                    };
                    if (color.Name is "Default" or "Black")
                    {
                        tempHex = shadeColor.Value;
                    }
                    shades.Add(shadeColor);
                }
                var materialColor = new MaterialColor
                {
                    Color = prop.Name,
                    Value = tempHex
                };
                colors.Add(materialColor);
            }
        }
        MaterialColors = colors;
        MaterialColorShades = shades;
    }
}
